<template>
    <div class="comment">
      <section class="header"></section>
      <section class="content">
        <Input class="content_input" v-model="content" type="textarea" :autosize="{minRows: 1,maxRows: 4}" placeholder="写评论..."/>
        <button class="btn" @click="comment">发布</button>
      </section>
    </div>
</template>

<script>
  import Input from "../../../node_modules/iview/src/components/input/input";
  import { Toast } from 'mint-ui'
    export default {
        props:[
          'article'
        ],
        data(){
            return{
                content: "",
            }
        },
      methods:{
          async comment(){
            console.log(this.$store.state.articleDetail);
            //获取信息
            let res = null;
            let url = '/v1/comment'
            let param = {
                commentId: this.$store.state.userInfo.userId,
                commentNick: this.$store.state.userInfo.nick,
                content: this.content,
                articleId: this.$store.state.articleDetail.id,
                commentParentId: this.$store.state.articleDetail.author,
                commentParentNick: this.$store.state.articleDetail.authorNick

            }
            await this.axios.post(url, param)
              .then(response => {
                res = response.data;
              })
            if (res.success){
              let instance = Toast({message: '评论成功', className: 'toast'});
              setTimeout(() => {
                instance.close();
              }, 2000);
            }else{
              let instance = Toast({message: '网络链接失败', className: 'toast'});
              setTimeout(() => {
                instance.close();
              }, 2000);
            }

          }
      },
      components: {Input}

    }
</script>

<style lang="scss">
  .ivu-input{
    resize: none;
  }
</style>

<style lang="scss" scoped>
  @import '../../style/mixin';

  .comment{
    background-color: #fff;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    box-shadow: 0 -0.026667rem 0.053333rem rgba(0,0,0,.1);
  }


  .content{
    width: 16rem;
    display: flex;


    .content_input{
      flex: 10;
      border: solid 1px #33CCFF;
    }
    .btn{
      flex: 2;
      background-color: #33CCFF;
      color: #FFFFFF;
      font-weight: bold;
    }
  }
</style>
